<template>
	<ul class="quick-tool-wrap">
		<li class="item" @click="setEdit">编辑</li>
		<li class="item" @click="setFull">
			<i class="iconfont icon-right" v-if="isFull"></i>
			<span>设为全屏</span>
		</li>
		<li class="item" @click="onItemClick('toggleLockElment')">{{_lockName}}</li>
		<li class="item" @click="onItemClick('deleteElment')">删除</li>
		<li class="divider"></li>
		<li class="group">
			<i class="iconfont icon-layer-up" title="上一层" @click="onItemClick('resetElementZIndex',{type: 'layerUp'})"></i>
			<i class="iconfont icon-layer-down" title="下一层" @click="onItemClick('resetElementZIndex',{type: 'layerDown'})"></i>
			<i class="iconfont icon-layer-top" title="移至顶层" @click="onItemClick('resetElementZIndex',{type: 'layerTop'})"></i>
			<i class="iconfont icon-layer-bottom" title="移至底层" @click="onItemClick('resetElementZIndex',{type: 'layerBottom'})"></i>
		</li>
	</ul>
</template>

<script>
	import { mapActions, mapGetters, mapMutations, mapState } from 'vuex'
	import uploadMixin from '@/mixins/assets-upload-mixin'
	export default {
		name: '',
		data() {
			return {}
		},
		props: {
			orgCurrElementData: {
				default: () => {
					return {}
				},
				type: Object
			},
			nowUUID: {
				default: '',
				type: String
			}
		},
		computed: {
			...mapState('programs', ['pageData', 'scenes', 'currBeforeElement', 'fullBeforeElement']),
			...mapGetters('programs', ['currElement', 'hasCurrElement']),
			_lockName() {
				const {
					currElement,
					hasCurrElement
				} = this
				if(!hasCurrElement) {
					return
				}
				return currElement.locked ? '解锁' : '锁定'
			},
			isFull() {
				const {
					currElement,
					hasCurrElement
				} = this
				if(!hasCurrElement) {
					return false
				}
				return currElement.commonStyle.width === this.pageData.width &&
					currElement.commonStyle.height === this.pageData.height
			}
		},
		mixins: [uploadMixin],
		methods: {
			...mapMutations('programs', ['resetElementZIndex', 'toggleLockElment', 'updateElementStyle', 'setCurrBeforeElement']),
			...mapActions('programs', ['deleteElment']),
			onItemClick(eventName, params = {}) {
				this[eventName] && this[eventName](params)
				this.$emit('selected')
			},
			setFull() {
				let {
					width,
					height
				} = this.pageData
				if(this.isFull) {
					//还原了
					this.updateElementStyle({
						top: this.fullBeforeElement[this.nowUUID].top,
						left: this.fullBeforeElement[this.nowUUID].left,
						width: this.fullBeforeElement[this.nowUUID].width,
						height: this.fullBeforeElement[this.nowUUID].height
					})
				} else {
					//全屏了
					this.updateElementStyle({
						top: 0,
						left: 0,
						width,
						height
					})
				}
				this.$emit('selected')
			},
			setEdit() {
				const {
					currElement,
					hasCurrElement
				} = this
				this.setCurrBeforeElement(currElement);
				if(!hasCurrElement) {
					return
				}
				const {
					elName,
					propsValue
				} = currElement
				if(elName === 'sxc-image') {
					this.beforeOpen({
						cid: 2,
						limit: 5,
						propName: {
							'propsValue': 'imageSrcList'
						},
						selected: propsValue && propsValue.imageSrcList ? [...propsValue.imageSrcList] : []
					})
				} else if(elName === 'sxc-video') {
					this.beforeOpen({
						cid: 1,
						limit: 5,
						propName: {
							'propsValue': 'videoList'
						},
						selected: propsValue && propsValue.videoList ? [...propsValue.videoList] : []
					})
				} else if(elName === 'sxc-document') {
					this.beforeOpen({
						cid: 3,
						limit: 1,
						propName: {
							'propsValue': 'docSrcList'
						},
						selected: propsValue && propsValue.docSrcList ? [...propsValue.docSrcList] : []
					})
				}
				this.$emit('selected')
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import '../../assets/scss/variables';
	.quick-tool-wrap {
		position: relative;
		width: 140px;
		padding: 5px 0;
		margin: 5px 0;
		background-color: #fff;
		border-radius: 0;
		box-sizing: border-box;
		box-shadow: 0 1px 6px rgba(0, 0, 0, 0.2);
		list-style: none;
		font-size: 14px;
		white-space: nowrap;
		cursor: pointer;
		z-index: 900;
		-webkit-tap-highlight-color: transparent;
		.item {
			margin: 0;
			padding: 7px 16px;
			clear: both;
			color: #515a6e;
			font-size: 12px;
			line-height: 1.5;
			text-indent: 20px;
			white-space: nowrap;
			list-style: none;
			position: relative;
			cursor: pointer;
			&:hover {
				background: $primary;
				color: #ffffff;
			}
			.iconfont {
				position: absolute;
				left: 0;
				height: 18px;
				line-height: 18px;
			}
		}
		.divider {
			height: 0;
			margin: 5px 0;
			border-bottom: 1px solid #e8e8e8;
		}
		.group {
			display: inline-flex;
			justify-content: center;
			align-content: center;
			height: 32px;
			padding: 1px 8px;
			max-width: 142px;
			.iconfont {
				width: 30px;
				height: 30px;
				line-height: 30px;
				color: #333333;
				text-align: center;
				vertical-align: middle;
				&:hover {
					background: $primary;
					color: #ffffff;
				}
			}
		}
	}
</style>